<%--
  Created by IntelliJ IDEA.
  User: cyc
  Date: 2021/9/28
  Time: 12:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>易买网 - 首页</title>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <script type="text/javascript" src="scripts/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="scripts/function.js"></script>
</head>
<body>
<div id="header" class="wrap">
    <div id="logo"><img src="images/logo.gif" /></div>
    <div class="help">
<%--        <c:if test="${sessionScope.user!=null}"><a href="shopping.jsp" id="shoppingBag" class="shopping">购物车${sessionScope.shopList.size()}件</a></c:if>--%>
        <c:if test="${sessionScope.user==null}"><a href="login.jsp">登录</a></c:if>
<%--        <c:if test="${sessionScope.user!=null}"> <span style="color: red">${sessionScope.user.userName}你好</span> </c:if>--%>
        <a class="button" id="logout" href="javascript:void(0);">注销</a><a href="register.jsp">注册</a>
        <a href="CommentServlet">留言</a>
        <a href="login.jsp">后台管理</a>
    </div>
    <div class="navbar">
        <ul class="clearfix">
            <li class="current"><a href="#">首页</a></li>
            <li><a href="#">图书</a></li>
            <li><a href="#">百货</a></li>
            <li><a href="#">品牌</a></li>
            <li><a href="#">促销</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="wrap">
        <ul class="clearfix">
            <li class="first"><a href="#">音乐</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">少儿</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">小说</a></li>
            <li><a href="#">外语</a></li>
            <li><a href="#">数码相机</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">秋冬靴</a></li>
            <li><a href="#">运动鞋</a></li>
            <li><a href="#">美容护肤</a></li>
            <li><a href="#">家纺用品</a></li>
            <li><a href="#">婴幼奶粉</a></li>
            <li><a href="#">饰品</a></li>
            <li class="last"><a href="#">Investor Relations</a></li>
        </ul>
    </div>
</div>
<div id="register" class="wrap">
    <div class="shadow">
        <em class="corner lb"></em>
        <em class="corner rt"></em>
        <div class="box">
            <h1>欢迎注册易买网</h1>
            <ul class="steps clearfix">
                <li class="current"><em></em>填写注册信息</li>
                <li class="last"><em></em>注册成功</li>
            </ul>
            <form id="regForm" method="post"  >
                <table>
                    <tr>
                        <td class="field">用户名(*)：</td>
                        <td>
                            <input class="text" type="text" name="userId"  id="userId" maxlength="10"  />
                            <span></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="field">真实姓名(*)：</td>
                        <td><input class="text" type="text" name="userName" id="username" /><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">登录密码(*)：</td>
                        <td><input class="text" type="password" id="password" name="password" /><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">确认密码(*)：</td>
                        <td><input class="text" type="password" name="confirmPassword" /><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">性别(*)：</td>
                        <td>
                            <input class="radio" type="radio" name="sex" value="1" checked="checked">
                            男性</input>
                            <input class="radio" type="radio" name="sex" value="0"
                            >女性</input>
                            <span></span></td>
                    </tr>

                    <tr>
                        <td class="field">身份证：</td>
                        <td><input class="text" type="text" name="identityCode" id="identityCode" /><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">电子邮件：</td>
                        <td><input class="text" type="text" name="email" id="email" /><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">收货地址(*)：</td>
                        <td><input class="text" type="text" name="address" id="address" /><span></span></td>
                    </tr>
                    <tr>
                        <td class="field">手机号码：</td>
                        <td><input class="text" type="text" name="mobile" id="mobile" /><span></span><button id="send">发送验证码</button></td>
                    </tr>
                    <tr>
                        <td class="field">验证码：</td>
                        <td><input class="text" type="text" name="code" id="code" /><span></span></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><label class="ui-green"><input type="button" name="submit" value="提交注册" id="register_btn" /></label></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div id="footer">
    Copyright &copy; 2010 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>

<script src="scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>
<script>
    var code="";
    $(function (){



        $("#send").click(function (){
            var phone=$("input[name=mobile]").val();
            $.post("${pageContext.request.contextPath}/send/code",{"phone":phone},function (res){
                if (res.code!="0"){
                    code=res.code;
                    alert(res.msg);
                }

            },"json")

        });


            $("#register_btn").click(function (){

                if ($("#regForm").valid()){
                    var loginname=$("#userId").val();
                    var username=$("#username").val();
                    var password=$("#password").val();
                    var sex=$('input:radio:checked').val();
                    var identitycode=$("#identityCode").val();
                    var email=$("#email").val();
                    var mobile=$("#mobile").val();
                    var address=$("#address").val();
                    $.ajax({
                        url:"${pageContext.request.contextPath}/user/register",
                        type:"post",
                        dataType:"json",
                        data:{"loginname":loginname,"username":username,"password":password,"sex":sex,"identitycode":identitycode,"email":email,"mobile":mobile,"address":address},
                        success:function (res){
                            if (res.code==1){
                                alert(res.msg);
                                location.href="${pageContext.request.contextPath}/login.jsp";
                            }else {
                                alert(res.msg);
                            }

                        }
                    });
                }


            });

    });


    $("#regForm").validate({
        rules:{
            userId:{required:true},
            userName:{required:true},
            password:{required:true,minlength:6},
            sex:{required:true},
            identityCode:{required:true,checkidentitycode:true},
            confirmPassword:{required:true,checkPass:true},
            email:{required:true,email:true},
            mobile:{required:true,checkMobile:true},
            address:{required:true},
            phone:{required:true},
            code:{required:true,checkcode:true}

        },
        messages:{
            userId:{required:"注册必填"},
            userName:{required:"注册必填"},
            password:{required:"注册必填",minlength:"密码最低6位"},
            sex:{required:"注册必填"},
            identityCode:{required:"注册必填"},
            email:{required:"注册必填",email:"请输入正确的邮箱"},
            mobile:{required:"注册必填"},
            address:{required:"注册必填"},
            code:{required:"验证码必填"}
        }
    })

    $.validator.addMethod("checkMobile",function(value,element,params){
        var checkQQ = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        return this.optional(element)||(checkQQ.test(value));
    },"请输入正确的手机号码！");

    $.validator.addMethod("checkidentitycode",function(value,element,params){
        var checkQQ = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        return this.optional(element)||(checkQQ.test(value));
    },"请输入正确的身份证号码！");

    $.validator.addMethod("checkPass",function(value,element,params){
        var check = $("input[name=password]").val();
        return this.optional(element)||(check==value);
    },"俩次密码不一致");
    $.validator.addMethod("checkcode",function(value,element,params){
        var check = code;
        return this.optional(element)||(check==value);
    },"验证码不正确");

</script>
</body>
</html>
